<template>
  <div class="bottom">
      <!-- <div class="i" @click="click_item">
          <van-icon name="home-o" v-bind:class="{active:isActive}" />
          <div v-bind:class="{active:isActive}">任务</div>
      </div>
      <div class="i">
          <van-icon name="aim" />
          <div>派单</div>
      </div>
      <div class="i"></div>
      <div class="i">
          <van-icon name="chat-o" />
          <div>我的</div>
      </div>
      <div class="i">
          <van-icon name="user-o" />
          <div>我的</div>
      </div> -->
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">任务</van-tabbar-item>
        <van-tabbar-item icon="aim">派单</van-tabbar-item>
        <van-tabbar-item icon="plus" class="plus"></van-tabbar-item>
        <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
        <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
    name: 'Bottom',
    data(){
        return{
            isActive:false,
            active: 0,
        }
    },
    methods:{
        click_item(){
            this.isActive = ! this.isActive
        }
    }
}
</script>

<style lang='scss' scoped>
.bottom{
    width: 375px;
    height: 70px;
    // background: #b63333;
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    // .active{
    //     color: #0080FF  !important;
    // }
    // .i{
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: center;
    //     align-items: center;
    //     /deep/ .van-icon{
    //         width: 26px;
    //         height: 26px;
    //         color: #BBC4CB;
    //     }
    //     >div{
    //         font-family: PingFang SC;
    //         font-style: normal;
    //         font-weight: normal;
    //         font-size: 11px;
    //         color: #BBC4CB;
    //         margin-top: 2px;
    //     }
    // }
    /deep/ .van-tabbar--fixed{
        height: 70px;
    }
    /deep/.plus{
        width: 50px  !important;
        // height: 70px;
        background: #0080FF;
        box-shadow: 0px 4px 6px rgba(0, 125, 240, 0.22);
        border-radius: 50%;
        .van-icon-plus{
            color: #fff;
        }
    }
}
</style>